<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="my-header">
          <ul>
            <li class="item" :class="{active: activeIndex == 1}" @click="change(1)">
              <router-link to="/member/collection/goods">关注的商品</router-link>
            </li>
            <li class="item" :class="{active: activeIndex == 2}" @click="change(2)">
              <router-link to="/member/collection/shops">关注的店铺</router-link>
            </li>
          </ul>
          <div class="search">
            <el-input
              v-model="myKey"
              class="w-50 m-2"
              :placeholder="placeholder"
              :prefix-icon="Search"
            />
            <el-button class="btn" type="info">搜索</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
  const myKey = ref('')
  const placeholder = ref('请输入商品名称')
  const route = useRoute()
  const activeIndex = ref(1)
  onMounted(() => {
    activeIndex.value = route.fullPath.includes('goods') ? 1 : 2
  })
  const change = (index) => {
    activeIndex.value = index
    switch (index) {
      case 1:
        placeholder.value = '请输入商品名称'
        break;
      case 2:
        placeholder.value = '请输入商铺名称'
        break;
      default:
        break;
    }
  }
</script>
<style scoped lang="less">
  .my-header {
    height: 100%;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search {
      display: flex;
      justify-content: flex-end;
      .btn {
        margin: 0 10px;
        background-color: @mainColor;
      }
    }
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .item {
        height: 100%;
        margin: 20px;
        a {
          font-weight: 600;
        }
      }
      .active {
        a {
          color: @mainColor;
          padding-bottom: 5px;
          border-bottom: 2px solid @mainColor;
        }
      }
    }
  }
  
  
</style>